<template>
  <div class="layerbox">
    <div class="options">
      <img src="../assets/images/tj.png">
      <div class="name">添加</div>
    </div>
    <div class="options" @click="hqzb">
      <img src="../assets/images/wz.png">
      <div class="name">获取坐标</div>
    </div>
    <div class="options">
      <img src="../assets/images/zh.png">
      <div class="name">坐标转换</div>
    </div>
    <div class="options">
      <img src="../assets/images/hz.png">
      <div class="name">绘制矢量</div>
    </div>
    <div class="options">
      <img src="../assets/images/tj.png">
      <div class="name">地图量测</div>
    </div>
    <div class="options">
      <img src="../assets/images/sj.png">
      <div class="name">数据转换</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.layerbox {
  display: flex;
  width: 550px;
  height: 30px;
  position: absolute;
  right: 30px;
  top: 15px;
  justify-content: space-around;
  background-color: #fff;
  z-index: 10;
  font-size: 13px;
  .options{
      display: flex;
      align-items: center;
  }
  .options img {
    display: flex;
    width: 18px;
    height: 18px;
    padding: 0 5px;
  }
  .options name {
    display: flex;
    width: 20px;
    height: 20px;
  }
}
</style>

<script>
export default {
  methods:{
    hqzb:maptitles.on('mousemove',function(e){
      document.getElementById('info').innerHTML=JSON.stringify(e.point)+'<br />'+JSON.stringify(e.lngLat)
    })
  }
}
</script>